<form class="input-group" action="{% url 'search' %}" method="get">
  <input
    name="q"
    type="text"
    aria-label="Search"
    placeholder="Search"
    class="form-control"
    value="{{ request.GET.q }}"
  />

  <input name="obj_type" hidden type="text" class="search-obj-type" />

  <span class="input-group-text search-obj-selected">All Objects</span>

  <button type="button" aria-expanded="false" data-bs-toggle="dropdown" class="btn dropdown-toggle">
    <i class="mdi mdi-filter-variant"></i>
  </button>

  <ul class="dropdown-menu dropdown-menu-end search-obj-selector">
    {% for option in options %}
      {% if option.items|length == 0 %}
        <li>
          <button class="dropdown-item" type="button" data-search-value="{{ option.value }}">
            {{ option.label }}
          </button>
        </li>
      {% else %}
        <li><h6 class="dropdown-header">{{ option.label }}</h6></li>
      {% endif %}

      {% for item in option.items %}
        <li>
          <button class="dropdown-item" type="button" data-search-value="{{ item.value }}">
            {{ item.label }}
          </button>
        </li>
      {% endfor %}

      {% if forloop.counter != options|length %}
        <li><hr class="dropdown-divider" /></li>
      {% endif %}
    {% endfor %}

  </ul>

  <button class="btn btn-primary" type="submit">
    <i class="mdi mdi-magnify"></i>
  </button>

</form>
